<template>
  <div>
    <a-card class="card" :title="$t('productInfo')" :bordered="false">
      <info-form ref="info" :showSubmit="false" />
    </a-card>
    <a-card :title="$t('productData')" :bordered="false">
      <data-form ref="data"/>
    </a-card>
    <footer-tool-bar>
      <a-button type="primary" @click="validate" :loading="loading">{{$t('submit')}}</a-button>
    </footer-tool-bar>
  </div>
</template>

<script>
import InfoForm from './InfoForm'
import DataForm from './DataForm'
import FooterToolBar from '@/components/tool/FooterToolBar'
import {productSaveOrUpdate} from '@/services/product'

export default {
  name: 'ProductForm',
  components: {FooterToolBar, InfoForm, DataForm},
  i18n: require('./i18n'),
  data () {
    return {
      loading: false
    }
  },
  computed: {
    desc() {
      return this.$t('desc')
    }
  },
  methods: {
    validate () {
      var dataData = this.$refs.data.dataSource.filter(item=>!item.editable)
      this.$refs.info.form.validateFields((err, values) => {
        if (!err) {
          var infoData = values.info
          var body = {
            productName: infoData.productName,
            dataLength: infoData.dataLength,
            dataBase: infoData.dataBase,
            dataStartFlag: infoData.dataStartFlag,
            dataEndFlag: infoData.dataEndFlag,
            productDataList: dataData
          }
          productSaveOrUpdate(body).then((rep)=>{
            if(rep.data.success) {
               this.$message.success('新增产品成功')
            } else {
              this.$message.error(rep.data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
</style>
